<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <div class="search">
            <NewCard>
              <div class="top_search">
                <!-- 搜索框 -->
                <el-input
                  placeholder="问三师 财法税战略落地平台"
                  v-model="inputSearch"
                  v-if="inputVisible"
                  ref="topSearch"
                  @focus="focusInput"
                  @blur="blurInput"
                  @input="getTopFound"
                  @keyup.enter.native="enterSearch($event)"
                  clearable
                >
                  <i slot="prefix">
                    <svg-icon icon-class="ss_icon" />
                  </i>
                </el-input>
                <el-button v-else class="button-new-tag" @click="showInput">
                  <svg-icon icon-class="ss_icon" />
                  问三师 财法税战略落地平台
                </el-button>

                <!-- ----------热门标签---------- -->
                <div class="top_found" v-show="topFoundShow" ref="topFound">
                  <ul>
                    <li
                      v-for="list in inputSearchList"
                      :key="list.key"
                      @mousedown.prevent="clickSearchTag(list.key || list)"
                    >
                      <p>{{ list.key || list }}</p>
                      <span v-if="list.value">{{ list.value }}条结果</span>
                      <span v-else>热门标签</span>
                    </li>
                  </ul>
                </div>
                <!-- ----------热门标签----------end -->

              </div>
              <p class="search_hint">关键词和关键词之间空格，关键词越多搜索越精确，例如：宅基地 出售</p>

              <div class="label_search" v-if="labelResult">
                <div class="content_search">
                  <h4>按指定内容搜索</h4>
                  <div>
                    <el-tag
                      :key="tag.id"
                      v-for="tag in contentSearch"
                      :disable-transitions="false"
                      effect="dark"
                      :class="tag.id == type ? 'isActive' : ''"
                      @click="changeType(tag.id)"
                    >
                      {{ tag.title }}
                    </el-tag>
                  </div>
                </div>
                <!-- ********************* 热门标签 ********************* -->
                <div class="content_search hot_label">
                  <h4>热门标签</h4>
                  <div>
                    <el-tag
                      :key="tag"
                      v-for="tag in hotLabelList"
                      :disable-transitions="false"
                      effect="dark"
                      @click="clickHotLabel(tag)"
                    >
                      {{ tag }}
                    </el-tag> 
                  </div>
                </div>
                <el-button
                  size="mini"
                  class="label_more"
                  @click="moreHotLabel"
                  v-show="hotLabelList.length < hotPageing.total">
                  更多<i class="el-icon-caret-bottom"></i>
                </el-button>
                <!--********************* 热门标签 *********************end -->

                <!-- gif图片展示 -->
                <!-- <div class="slogan">
                  <div class="gif">
                    <img src="https://wensanshi.oss-cn-shenzhen.aliyuncs.com/images/static/20220909-115231.gif" alt="">
                  </div>
                  <div class="text">
                    <div class="cn">
                      搜到就是賺到
                    </div>
                    <div class="en">
                      What you find is what you earn
                    </div>
                  </div>
                </div> -->
                <!-- gif图片展示 end-->
              </div>

              <div class="search_result" v-else ref="seaResult">
                <!-- 标签*************** -->
                <div class="search_label" v-show="hotLabelClick">
                  <svg-icon icon-class="ht_icon" /> {{ hotLabelClick }}
                </div>

                <div class="search_criteria">
                  <div>
                    已选搜索条件：
                    <el-tag
                      color="#FFFAF2"
                      closable
                      v-for="ts in topSearch"
                      :key="ts"
                      @close="handleClose(ts)"
                    >
                      {{ ts }}
                    </el-tag>
                  </div>
                  <p @click="emptyTag">清空</p>
                </div>

                <div v-if="labelBoxShow">
                  <div class="search_tab">
                    <el-tabs v-model="labelActive" type="card">
                      <!-- labelInfo.n.total_cnt 关键词标签统计 -->
                      <el-tab-pane
                        :label="`关键词(${labelInfo.n.total_cnt})`"
                        name="nList"
                      >
                        <el-tag
                          v-for="n in nList"
                          :key="n.key"
                          @click="clickTag(n.key)"
                        >
                          <span>{{ n.key }}</span> <span>{{ n.value }}</span>
                        </el-tag>
                        <el-button
                          size="mini"
                          class="label_more"
                          @click="clicknListMore"
                          v-show="nListNum <= nList.length"
                        >
                          更多<i class="el-icon-caret-bottom"></i>
                        </el-button>
                      </el-tab-pane>
                      <!-- labelInfo.ns.total_cnt 地址标签统计 -->
                      <el-tab-pane
                        :label="`地址(${labelInfo.ns.total_cnt})`"
                        name="nsList"
                      >
                        <el-tag
                          v-for="ns in nsList"
                          :key="ns.key"
                          @click="clickTag(ns.key)"
                        >
                          <span>{{ ns.key }}</span> <span>{{ ns.value }}</span>
                        </el-tag>
                        <el-button
                          size="mini"
                          class="label_more"
                          @click="clicknsListMore"
                          v-show="nsListNum <= nsList.length"
                        >
                          更多<i class="el-icon-caret-bottom"></i>
                        </el-button>
                      </el-tab-pane>
                      <!-- labelInfo.nt.total_cnt 机构标签统计 -->
                      <el-tab-pane
                        :label="`机构(${labelInfo.nt.total_cnt})`"
                        name="ntList"
                      >
                        <el-tag
                          v-for="nt in ntList"
                          :key="nt.key"
                          @click="clickTag(nt.key)"
                        >
                          <span>{{ nt.key }}</span> <span>{{ nt.value }}</span>
                        </el-tag>
                        <el-button
                          size="mini"
                          class="label_more"
                          @click="clickntListMore"
                          v-show="ntListNum <= ntList.length"
                        >
                          更多<i class="el-icon-caret-bottom"></i>
                        </el-button>
                      </el-tab-pane>
                      <!-- labelInfo.t.total_cnt 时间标签统计 暂时隐藏********误删 -->
                      <!-- <el-tab-pane :label="`时间(${labelInfo.t.total_cnt})`" name="tList">
                        <el-tag
                          v-for="t in tList"
                          :key="t.key"
                          @click="clickTag(t.key)"
                        >
                          <span>{{ t.key }}</span> <span>{{ t.value }}</span>
                        </el-tag>
                        <el-button
                          size="mini"
                          class="label_more"
                          @click="clicktListMore"
                          v-show="tListNum <= tList.length"
                        >
                          更多<i class="el-icon-caret-bottom"></i>
                        </el-button>
                      </el-tab-pane> -->
                      <!-- 暂时隐藏********误删  -->
                    </el-tabs>
                  </div>
                </div>

                <!-- 内容********************* -->
                <!-- 1法条lawList 2解答answerList 3政策policyList 4合同contractList -->
                <div class="search_list">
                  <p class="search_total">共 {{ searchResTotal }} 条搜索结果</p>
                  <el-tabs
                    v-model="listActive"
                    type="card"
                    @tab-click="getListInfo"
                  >
                    <!-- 解答 -->
                    <el-tab-pane
                      :label="`解答(${searchArticleList.qa})`"
                      name="2"
                    >
                      <ul>
                        <li
                          v-for="answer in answerList"
                          :key="answer.id"
                          @click="clickArticle(answer)"
                          :class="
                            answer.id == currentDetail.id ? 'isActive' : ''
                          "
                        >
                          <h2>{{ answer.title }}</h2>
                          <!-- <i class="firstWord">{{ getHanzi(answer.title) }}</i> -->
                          <p class="coll_des">{{ answer.background }}</p>
                          <p class="coll_source">
                            {{ answer.from }} ·
                            {{ answer.publishTime ? answer.publishTime.substring(0, 10) : answer.createTime.substring(0, 10) }}
                          </p>
                        </li>
                      </ul>
                      <el-button
                        size="mini"
                        class="label_more"
                        v-if="answerMore"
                        @click="clickAnswerList"
                      >
                        更多<i class="el-icon-caret-bottom"></i>
                      </el-button>
                      <p v-else>暂无更多数据</p>
                    </el-tab-pane>
                    <el-tab-pane
                      :label="`咨询(${searchArticleList.consult})`"
                      name="5"
                    >
                      <div class="tabThree">
                        <ul>
                          <li v-for="t in consultList" :key="t.id" @click="clickConsults(t)"
                          >
                            <img :src="t.icon1" alt="" />
                            <div class="threeTxt">
                              <p>{{ t.name }}</p>
                              <span>{{ t.describable }}</span>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <el-button
                        size="mini"
                        class="label_more"
                        v-if="consultMore"
                        @click="clickConsultList"
                      >
                        更多<i class="el-icon-caret-bottom"></i>
                      </el-button>
                      <p v-else>暂无更多数据</p>
                    </el-tab-pane>
                    <el-tab-pane
                      :label="`工具(${searchArticleList.project})`"
                      name="6"
                    >
                      <div class="tabThree">
                        <ul>
                          <li v-for="t in projectList" :key="t.id" @click="clickProjects(t)"
                          >
                            <img :src="t.icon1" alt="" />
                            <div class="threeTxt">
                              <p>{{ t.name }}</p>
                              <span>{{ t.describable }}</span>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <el-button
                        size="mini"
                        class="label_more"
                        v-if="projectMore"
                        @click="clickProjectList"
                      >
                        更多<i class="el-icon-caret-bottom"></i>
                      </el-button>
                      <p v-else>暂无更多数据</p>
                    </el-tab-pane>
                    <!-- 政策 -->
                    <!-- <el-tab-pane
                      :label="`政策(${searchArticleList.policy})`"
                      name="3"
                    >
                      <ul>
                        <li
                          v-for="policy in policyList"
                          :key="policy.id"
                          @click="clickArticle(policy)"
                          :class="
                            policy.id == currentDetail.id ? 'isActive' : ''
                          "
                        >
                          <h2>{{ policy.title }}</h2>
                          <i class="firstWord">{{ getHanzi(policy.title) }}</i>
                          <p class="coll_des">{{ policy.background }}</p>
                          <p class="coll_source">
                            {{ policy.from }} ·
                            {{ policy.publishTime ? policy.publishTime.substring(0, 10) : policy.createTime.substring(0, 10) }}
                          </p>
                        </li>
                      </ul>
                      <el-button
                        size="mini"
                        class="label_more"
                        v-if="policyMore"
                        @click="clickPolicyList"
                      >
                        更多<i class="el-icon-caret-bottom"></i>
                      </el-button>
                      <p v-else>暂无更多数据</p>
                    </el-tab-pane> -->
                    <!-- 法条 -->
                    <!-- <el-tab-pane
                      :label="`法条(${searchArticleList.law})`"
                      name="1"
                    >
                      <ul>
                        <li
                          v-for="law in lawList"
                          :key="law.id"
                          @click="clickArticle(law)"
                          :class="law.id == currentDetail.id ? 'isActive' : ''"
                        >
                          <h2>{{ law.title }}</h2>
                          <i class="firstWord">{{ getHanzi(law.title) }}</i>
                          <p class="coll_des">{{ law.history }}</p>
                          <p class="coll_source">
                            {{ law.from }} ·
                            {{ law.publishTime.substring(0, 10) }}
                          </p>
                        </li>
                      </ul>
                      <el-button
                        size="mini"
                        class="label_more"
                        v-if="lawMore"
                        @click="clickLawList"
                      >
                        更多<i class="el-icon-caret-bottom"></i>
                      </el-button>
                      <p v-else>暂无更多数据</p>
                    </el-tab-pane> -->
                    <!-- 合同 -->
                    <el-tab-pane
                      :label="`合同(${searchArticleList.contract})`"
                      name="4"
                    >
                      <ul>
                        <li
                          v-for="contract in contractList"
                          :key="contract.id"
                          @click="clickArticle(contract)"
                          :class="
                            contract.id == currentDetail.id ? 'isActive' : ''
                          "
                        >
                          <h2>{{ contract.name }}</h2>
                          <!-- <i class="firstWord">{{ getHanzi(contract.name) }}</i> -->
                          <p class="coll_des"></p>
                          <p class="coll_source">
                            {{ contract.from }} ·
                            {{ contract.createTime.substring(0, 10) }}
                          </p>
                        </li>
                      </ul>
                      <el-button
                        size="mini"
                        class="label_more"
                        v-if="contractMore"
                        @click="clickContractList"
                      >
                        更多<i class="el-icon-caret-bottom"></i>
                      </el-button>
                      <p v-else>暂无更多数据</p>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
              <!-- 加载状态loading -->
              <div class="loading" v-show="loadShow">
                <p>
                  <i class="el-icon-loading"></i>
                  加载中
                </p>
              </div>
            </NewCard>
          </div>
        </el-col>
        <el-col :span="14">
          <!-- 推荐内容 -->
          <div class="recommend" v-if="recommendShow == 1">
            <FeaturedContent></FeaturedContent>
          </div>
          <!-- 搜索详情 -->
          <div class="detailPage" v-else-if="recommendShow == 2">
            <!-- topSearch 传入关键词高亮 -->
            <DetailPage
              :currentDetail="currentDetail"
              :listActive="listActive"
              :topSearch="topSearch"
              ref="detailPage">
            </DetailPage>
          </div>
          <!-- 支付页面 -->
          <div class="emailBox" v-else>
            <Pay
              :currentDetail="currActive"
              :goodsList="goodsList"
              :isEmailOrDown="isEmailOrDown"
              :listActive="listActive"
            ></Pay>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import FeaturedContent from "@/components/FeaturedContent/index.vue";
import DetailPage from "./detailPage.vue";
import Pay from "@/components/FeaturedContent/Pay.vue";
import NewCard from "@/wss/components/newCard.vue";
import mockList from "@/utils/tmp.js";
import debounce from "lodash/debounce";
import {
  getHotLabelApi,
  getOverallSearchApi,
  userLabelAddApi,
  getAllLabelListApi,
} from "@/BMViews/api/doc/search.js";
import { getFindConsultTypeListApi } from "@/BMViews/api/work/consult.js";
import { getFindProjectTypelistApi } from "@/wss/newApi_3-24/work/projectType.js";

export default {
  name: "searchAnswer",
  components: { NewCard, FeaturedContent, DetailPage, Pay },
  data() {
    return {
      type: 1, //当前的搜索类型
      topSearch: [], //搜索的数组
      inputSearch: "", //当前输入框的内容
      inputSearchList: [], //输入框搜索过滤的列表
      inputVisible: false, //搜索框显示隐藏
      topFoundShow: false, //搜索发现显示隐藏
      contentSearch: [
        { id: "2", title: "解答" },
        { id: "5", title: "咨询" },
        { id: "6", title: "工具" },
        // { id: "3", title: "政策" },
        // { id: "1", title: "法条" },
        { id: "4", title: "合同" },
      ], //按指定内容搜索

      hotPageing:{pageNum:1,pageSize:12,total:0},//热门标签分页
      hotLabelList: [], //全部热门标签
      hotLabel: [], //显示的热门标签
      hotLabelNum: 12, //热门标签展示的数量
      hotLabelMove: true, //热门标签按钮显示隐藏
      hotLabelClick: "", //单击的热门标签

      pageing: { pageNum: 1, pageSize: 10 }, //搜索分页
      labelInfo: {}, //查询出来的标签信息
      tableData: [], //查询出来的文章列表

      nList: [], //关键词标签列表
      nsList: [], //地名标签列表
      ntList: [], //机构标签列表
      tList: [], //时间标签列表
      nListNum: 8, //关键词标签展示数量
      nsListNum: 8, //地名标签展示数量
      ntListNum: 8, //机构标签展示数量
      tListNum: 8, //时间标签展示数量

      // 1法条 2解答 3政策 4合同
      lawList: [], //法条 文章列表
      lawMoreNum: 0, //法条更多的页数
      answerList: [], //解答 文章列表
      answerMoreNum: 0, //解答更多的页数
      policyList: [], //政策 文章列表
      policyMoreNum: 0, //政策更多的页数
      contractList: [], //合同 文章列表
      contractMoreNum: 0, //合同更多的页数
      currentDetail: {}, // 当前点击的文章的数据
      lawMore: true, //法条更多按钮
      answerMore: true, //解答更多按钮
      policyMore: true, //政策更多按钮
      contractMore: true, //合同更多按钮

      labelResult: true, //搜索结果页显示隐藏
      labelActive: "nList", //标签 tab栏默认显示
      listActive: "2", //列表 tab栏默认显示

      loadShow: true, //加载状态的显示隐藏

      recommendShow: 1, //1推荐内容 2搜索页面 3电邮未付费页面

      consultList:[], //咨询列表
      consultMoreNum: 0, //咨询更多的页数
      consultMore: true, //咨询更多按钮


      projectList:[], //工具列表
      projectMoreNum: 0, //工具更多的页数
      projectMore: true, //工具更多按钮

      //   咨询项目数组
      consultTypeList: [],
      projectTypeList: [],


      mockList: [],

      // 当标签内没有搜索词的时候是直接搜索，要把标签内容隐藏
      labelBoxShow: true,
      //直接搜索的文章数量
      searchArticleList: {
        contract: "",
        law: "",
        qa: "",
        policy: "",
      },
      searchState: false, //当前的搜索状态 true是直接搜索，false是标签搜索

      currActiveShow: 1, // 是否显示阅读原文 1显示推荐 2显示内容 3支付页
      currActive: {}, //当前点击的文章
      goodsList: {}, //当前点击的文章是否购买
      isEmailOrDown: false, // 是否点击的是true电邮还是false下载文档
    };
  },
  // 离开路由的钩子
  beforeRouteLeave (to, from, next) {
    if(this.$refs.detailPage){
      this.$refs.detailPage.getArticleTime() // 计算在文章内停留的时间
    }
    next();
  },
  // beforeRouteLeave(to, from, next) {
  //   to.meta.name = "axiaxi";
  //   console.log(next());
  // },
  async created() {
    this.getHotLabel(); //获取热门标签
    this.getLabelList(); //获取初始关键词列表
    //获取当前的搜索类型： 1法条 2解答 3政策 4合同  type是字符串
    this.type = this.$route.meta.id.toString();
    this.listActive = this.$route.meta.id.toString();

    //通过$bus 子组件修改当前显示的
    this.$bus.$on("handlerShow", (num, detail, goodsList, isEmailOrDown) => {
      this.recommendShow = num;
      this.currActive = detail;
      this.goodsList = goodsList;
      this.isEmailOrDown = isEmailOrDown;
    });

    // 在每次绑定事件前，先解绑该事件 detailLabel
    this.$bus.$off("detailLabel");
    //通过$bus 子组件的标签发起请求搜索
    this.$bus.$on("detailLabel", async (label) => {
      //添加用户搜索记录(每次在搜索框搜索添加一次记录)
      if (this.$store.getters.token) {
        // if (this.topSearch.indexOf(label) == -1) {
        //判断当前的搜索状态是否为直接搜索，是的话把点击的文章标签添加到搜索框内，然后用这个搜索框的值去发请求
        console.log(this.topSearch.includes(label),'我进来了--------------------------');
        if (!this.topSearch.includes(label)) {
          //true是直接搜索，false是标签搜索
          this.searchState = true; //6.9改成了直接搜索，暂时不用标签搜索
          if (this.searchState == true) {
            this.inputSearch = this.inputSearch + " " + label;
            this.topSearch.push(label);
          }
          //发起请求
          await this.getOverallSearch();
          //添加用户搜索记录(每次在搜索框搜索添加一次记录)
          this.userLabelAdd(label);
        }
      }
      // }
    });
  },
  async mounted() {
    // 路由传参过来的数据（别的页面点击标签跳转过来然后搜索）
    if (this.$route.query.label) {
      let label = this.$route.query.label;
      this.searchState = true; //6.9改成了直接搜索，暂时不用标签搜索
      if (this.searchState == true) {
        this.inputSearch = this.inputSearch + " " + label;
        this.topSearch.push(label);
      }
      //发起请求
      await this.getOverallSearch();
      //添加用户搜索记录(每次在搜索框搜索添加一次记录)
      this.userLabelAdd(label);
    }
    this.getConsultTypeListFn();
    this.getProjectTypeListFn();
    // 返回
    this.$bus.$on("returnBtnShow",(num)=>{
      this.recommendShow = num;
    })
  },
  methods: {
    //获取热门标签
    async getHotLabel() {
      let result = await getHotLabelApi(this.hotPageing);
      if (result.code == 200) {
        this.hotPageing.total = result.total //总数
        this.hotLabelList = [...this.hotLabelList,...result.labels];
        // this.hotLabelList = result.data.slice(0, 12)
        // this.hotLabel = result.data
      }
    },

    //点击按指定内容搜索更换type
    changeType(type) {
      this.type = type;
      this.listActive = type;
    },

    //点击热门关键词获取更多标签
    async moreHotLabel() {
      this.hotPageing.pageNum = this.hotPageing.pageNum+1
      await this.getHotLabel(); //获取热门标签
    },

    //点击热门标签搜索
    clickHotLabel(tag) {
      //清除搜索框和搜索结果内容
      this.inputSearch = tag;
      this.inputSearchList = [];
      this.topSearch = [];

      this.hotLabelClick = tag;
      this.topSearch.push(tag);
      //发起请求
      this.getOverallSearch();
      //添加用户搜索记录(每次在搜索框搜索添加一次记录)
      if (this.$store.getters.token) {
        //添加用户搜索记录(每次在搜索框搜索添加一次记录)
        this.userLabelAdd(tag);
      }
    },

    //点击搜索发现的标签
    clickSearchTag(tag) {
      //隐藏搜索发现
      this.inputVisible = false;
      // this.topSearch = [];
      //把点击的标签名称添加进topSearch
      this.topSearch.push(tag);
      //清除搜索框和搜索结果内容
      this.inputSearch = "";
      this.inputSearchList = [];
      //发起查询请求
      this.getOverallSearch();
      //  已登录再调用此接口
      if (this.$store.getters.token) {
        //添加用户搜索记录(每次在搜索框搜索添加一次记录)
        this.userLabelAdd(tag);
      }

      this.nListNum = 8;
      this.nsListNum = 8;
      this.ntListNum = 8;
      this.tListNum = 8;
    },

    //点击标签搜索
    clickTag(tag) {
      //把点击的标签名称添加进topSearch
      this.topSearch.push(tag);
      // console.log(this.topSearch);
      //清除搜索框和搜索结果内容
      this.inputSearch = "";
      this.inputSearchList = [];
      //发起查询请求
      this.getOverallSearch();
      //添加用户搜索记录(每次在搜索框搜索添加一次记录)
      if (this.$store.getters.token) {
        //添加用户搜索记录(每次在搜索框搜索添加一次记录)
        this.userLabelAdd(tag);
      }

      this.nListNum = 8;
      this.nsListNum = 8;
      this.ntListNum = 8;
      this.tListNum = 8;
    },

    //点击关闭已选搜索条件
    handleClose(ts) {
      this.topSearch.splice(this.topSearch.indexOf(ts), 1);
      //删除好的搜索条件赋值给到输入框中
      this.inputSearch = this.topSearch.join(" ");
      // 判断是否是清掉最后一个关键词，清掉恢复初始关键词搜索
      if (this.topSearch.length <= 0) {
        // 清空已搜索
        this.topSearch = [];
        //清空输入框
        this.inputSearch = "";
        // 清空搜索发现
        this.inputSearchList = this.mockList.slice(0, 20);
        // 清空吧标签数据
        this.labelInfo = {};
        //搜索条件改回初始状态 false标签搜索
        this.searchState = false;
        //显示初始搜索页
        this.labelResult = true;
      }

      //判断搜索的标签是否大于0，大于0去搜索，小于0显示初始搜索页
      if (this.topSearch.length > 0) {
        //发起请求
        this.getOverallSearch();
      } else {
        // 回到初始搜索页之后清除标签列表的数据（方便判断是第一次进入时用的搜索发现）
        this.labelInfo = {};
        //显示初始搜索页
        this.labelResult = true;
      }
    },

    //点击清空已搜索的条件
    emptyTag() {
      // 清空已搜索
      this.topSearch = [];
      //清空输入框
      this.inputSearch = "";
      // 清空搜索发现
      this.inputSearchList = this.mockList.slice(0, 20);
      // 清空吧标签数据
      this.labelInfo = {};
      //搜索条件改回初始状态 false标签搜索
      this.searchState = false;
      //显示初始搜索页
      this.labelResult = true;
    },

    //搜索框点击显示
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.topSearch.$refs.input.focus();
      });
    },

    // 激活时触发
    focusInput(event) {
      event.target.classList.add("focusInput");
      //判断inputSearchList是否有内容，有的话给topSearch、topFound添加类目noSearchList
      if (this.inputSearchList.length <= 0) {
        this.$refs.topSearch.$refs.input.classList.add("noSearchList");
        this.$refs.topFound.classList.add("noSearchList");
      } else {
        this.$refs.topSearch.$refs.input.classList.remove("noSearchList");
        this.$refs.topFound.classList.remove("noSearchList");
      }
      this.topFoundShow = true; //搜索发现显示
    },

    //失去焦点触发
    blurInput(event) {
      //判断inputSearchList是否有内容，有的话先等待50毫秒让单击某一条结果再隐藏
      this.inputVisible = false;
      event.target.classList.remove("focusInput");
      this.topFoundShow = false; //搜索发现隐藏
    },

    //用户输入时获取对应关键字的搜索发现
    async getTopFound() {
      // console.log(this.labelInfo, "出来");
      // 用户输入后把之前的清空
      // this.topSearch = [];
      // inputSearch 当前输入框的内容
      //判断labelInfo是否为空，如果为空执行查热门标签，不为空执行查标签分词内容
      let list = [];
      // let inputSearch = []
      let labelsList = {};
      // this.topSearch.push(this.inputSearch);
      if (this.inputSearch != "") {
        if (JSON.stringify(this.labelInfo) == "{}") {
          // console.log('无内容');
          let label = this.mockList.filter((item) =>
            item.includes(this.inputSearch)
          );
          list = label;
        } else {
          // console.log('有内容');
          let filtrLabel = this.inputSearchList.filter((item) =>
            item.key.includes(this.inputSearch)
          );
          list = filtrLabel;
        }
      } else {
        if (JSON.stringify(this.labelInfo) == "{}") {
          list = this.mockList.slice(0, 20);
        } else {
          // 搜索出来的全部标签
          let n = this.labelInfo.n.detail;
          let ns = this.labelInfo.ns.detail;
          let nt = this.labelInfo.nt.detail;
          let t = this.labelInfo.t.detail;
          list = [...n, ...ns, ...nt, ...t];
        }
      }

      //判断list是否有内容，有的话给topSearch、topFound添加类目noSearchList
      if (list.length <= 0) {
        this.$refs.topSearch.$refs.input.classList.add("noSearchList");
        this.$refs.topFound.classList.add("noSearchList");
      } else {
        this.$refs.topSearch.$refs.input.classList.remove("noSearchList");
        this.$refs.topFound.classList.remove("noSearchList");
      }
      this.inputSearchList = list;
    },

    // 搜索框按下回车的回调
    enterSearch(event) {
      if (this.$store.getters.token) {
        //根据标点符号分割并且赋值给topSearch
        let patrn =
          /[ `~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/;
        let newArr = this.inputSearch.split(patrn).filter(_=>_)
        this.topSearch = newArr;
        //隐藏搜索发现框
        this.inputVisible = false;
        event.target.classList.remove("focusInput");
        this.topFoundShow = false;
        //发请求
        this.getOverallSearch();
      } else {
        this.$message({ type: "warning", message: "请登录！" });
        this.$router.push("/Bm-personalCenter/login");
      }
    },

    // 首页查询接口
    async getOverallSearch() {
      this.loadShow = true; //加载状态
      let pageNum = this.pageing.pageNum;
      let pageSize = this.pageing.pageSize;
      let labels = this.topSearch;
      let wenWen = this.inputSearch;
      let type = this.type;
      let params = {};

      // 判断如果是标签搜索把labels放入params，如果是直接搜索把wenWen放入params
      let filterlabel = this.mockList.filter((item) => {
        return item.includes(this.inputSearch);
      });

      if (filterlabel.length > 0) {
        // 标签搜索
        // params = {labels,pageNum,pageSize,type,wenWen}

        // ************6.9号改成了直接搜索，暂时不用标签搜索
        let str = labels.join(" ");
        params = { pageNum, pageSize, type, wenWen: str };
        //修改当前的搜索状态为true  true是直接搜索，false是标签搜索
        this.searchState = true;
        // ************6.9号改成了直接搜索，暂时不用标签搜索 end
      } else {
        // 直接搜索
        params = { pageNum, pageSize, type, wenWen };
        //修改当前的搜索状态为true  true是直接搜索，false是标签搜索
        this.searchState = true;
      }

      // 发起请求的代码
      // let result = await getOverallSearchApi(params);
      getOverallSearchApi(params).then((result)=>{
        console.log(result,'mmmmmmssssssssssssssssmmmmmmmmm');
        if (result.code == 200) {
          // 判断如果是标签搜索就走标签  标签搜索原来是 filterlabel.length>0
          if (!this.searchState) {
            this.loadShow = false;
            //显示标签模块
            this.labelBoxShow = true;
            this.labelInfo = result.data.labelInfo.data;

            // 关键词排序 由大到小
            function paixu(ary, key) {
              return ary.sort(function (a, b) {
                let x = a[key];
                let y = b[key];
                return x > y ? -1 : x < y ? 1 : 0;
              });
            }
            paixu(this.labelInfo.n.detail, "value");
            paixu(this.labelInfo.ns.detail, "value");
            paixu(this.labelInfo.nt.detail, "value");
            paixu(this.labelInfo.t.detail, "value");
            // 关键词排序 end

            this.tableData = result.data.tableData;
            //显示搜索结果页
            this.labelResult = false;

            //返回顶部
            this.$nextTick(() => {
              this.$refs.seaResult.scrollTo(0, 0);
            });

            //关键词标签列表nList  地名标签列表nsList  机构标签列表ntList  时间标签列表tList
            this.nList = this.labelInfo.n.detail.slice(0, 8);
            this.nsList = this.labelInfo.ns.detail.slice(0, 8);
            this.ntList = this.labelInfo.nt.detail.slice(0, 8);
            this.tList = this.labelInfo.t.detail.slice(0, 8);

            // 搜索出来的全部标签
            let n = this.labelInfo.n.detail;
            let ns = this.labelInfo.ns.detail;
            let nt = this.labelInfo.nt.detail;
            let t = this.labelInfo.t.detail;
            let list = [...n, ...ns, ...nt, ...t];
            this.inputSearchList = list;

            // 1法条lawList 2解答answerList 3政策policyList 4合同contractList
            this.searchArticleList.contract = result.data.labelInfo.data.contract.total_cnt;
            this.searchArticleList.law = result.data.labelInfo.data.law.total_cnt;
            this.searchArticleList.qa = result.data.labelInfo.data.qa.total_cnt;
            this.searchArticleList.policy = result.data.labelInfo.data.policy.total_cnt;
            //判断当前的文章类型合并到对应的列表
            if (this.type == "1") {
              this.lawList = result.data.tableData.rows;
            } else if (this.type == "2") {
              this.answerList = result.data.tableData.rows;
            } else if (this.type == "3") {
              this.policyList = result.data.tableData.rows;
            } else {
              this.contractList = result.data.tableData.rows;
            }
          } else {
            //隐藏标签模块
            this.labelBoxShow = false;
            // 判断如果是直接搜索就不显示标签
            this.loadShow = false;
            this.tableData = result.data.tableData;
            //显示搜索结果页
            this.labelResult = false;
            //返回顶部
            this.$nextTick(() => {
              this.$refs.seaResult.scrollTo(0, 0);
            });
            // 1法条lawList 2解答answerList 3政策policyList 4合同contractList
            this.searchArticleList = result.data.labelInfo;
            //判断当前的文章类型合并到对应的列表
            if (this.type == "1") {
              this.lawList = result.data.tableData.rows;
            } else if (this.type == "2") {
              this.answerList = result.data.tableData.rows;
            } else if (this.type == "3") {
              this.policyList = result.data.tableData.rows;
            }else if (this.type == "5") {
              //咨询
              this.consultList = result.data.tableData.rows;
            } else if (this.type == "6") {
              //工具
              this.projectList = result.data.tableData.rows;
            } else {
              this.contractList = result.data.tableData.rows;
            }
          }
        }
      }).catch(err => {
        this.loadShow = false;
      })
    },

    //获取初始关键词列表数据
    async getLabelList() {
      let result = await getAllLabelListApi(50000);
      if (result.code == 200) {
        this.mockList = result.data;
      }
    },

    //添加用户搜索记录(每次在搜索框搜索添加一次记录)
    userLabelAdd: debounce(async function (label) {
      // let label = this.topSearch[this.topSearch.length - 1];
      console.log(label);
      // 如果标签为空不发请求
      if (label) {
        let result = await userLabelAddApi([{ label }]);
        if (result.code == 200) {
          console.log("添加用户搜索记录成功");
        } else {
          return;
        }
      }
    }, 1500),
    // async userLabelAdd() {
    //   let label = this.topSearch[this.topSearch.length - 1];
    //   let result = await userLabelAddApi([{ label }]);
    //   if (result.code == 200) {
    //     console.log("添加用户搜索记录成功");
    //   }
    // },

    //点击关键词tag的更多
    clicknListMore() {
      this.nListNum = this.nListNum + 8;
      this.nList = this.labelInfo.n.detail.slice(0, this.nListNum);
      // console.log('关键词nList');
    },
    //点击地址tag的更多
    clicknsListMore() {
      this.nsListNum = this.nsListNum + 8;
      this.nsList = this.labelInfo.ns.detail.slice(0, this.nsListNum);
      // console.log('地址nsList');
    },
    //点击机构tag的更多
    clickntListMore() {
      this.ntListNum = this.ntListNum + 8;
      this.ntList = this.labelInfo.nt.detail.slice(0, this.ntListNum);
      // console.log('机构ntList');
    },
    //点击日期tag的更多
    clicktListMore() {
      this.tListNum = this.tListNum + 8;
      this.tList = this.labelInfo.t.detail.slice(0, this.tListNum);
      // console.log('日期tList');
    },

    // *************************文章列表*************************
    // 1法条lawList 2解答answerList 3政策policyList 4合同contractList
    //点击tab栏获取对应的文章列表并展示
    getListInfo() {
      //显示推荐页面
      this.recommendShow = 1;

      //判断这四个的数据是否小于0，小于0的话才去发请求
      if (
        this.lawList.length <= 0 ||
        this.answerList.length <= 0 ||
        this.policyList.length <= 0 ||
        this.contractList.length <= 0
      ) {
        this.type = this.listActive;
        //修改当前的type对应点击的类型，然后去发请求获取点击的这一个类型的数据
        this.getOverallSearch();
      }
    },
    //点击文章的更多获取
    async getMoreList(num) {
      this.loadShow = true; //加载状态
      let pageNum = this.pageing.pageNum + num;
      let pageSize = this.pageing.pageSize;
      let labels = this.topSearch;
      let wenWen = this.inputSearch;
      let type = this.type;
      let params = {};

      // 判断如果是标签搜索把labels放入params，如果是直接搜索把wenWen放入params
      let filterlabel = this.mockList.filter((item) => {
        return item.includes(this.inputSearch);
      });

      if (filterlabel.length > 0) {
        // 标签搜索
        // params = {labels,pageNum,pageSize,type,wenWen}

        // ************6.9号改成了直接搜索，暂时不用标签搜索
        let str = labels.join(" ");
        params = { pageNum, pageSize, type, wenWen: str };
        //修改当前的搜索状态为true  true是直接搜索，false是标签搜索
        this.searchState = true;
        // ************6.9号改成了直接搜索，暂时不用标签搜索 end
      } else {
        // 直接搜索
        params = { pageNum, pageSize, type, wenWen };
        //修改当前的搜索状态为true  true是直接搜索，false是标签搜索
        this.searchState = true;
      }

      let result = await getOverallSearchApi(params);
      if (result.code == 200) {
        this.loadShow = false; //加载状态
        //判断当前的文章类型合并到对应的列表
        if (this.type == "1") {
          this.lawList = [...this.lawList, ...result.data.tableData.rows];
        } else if (this.type == "2") {
          this.answerList = [...this.answerList, ...result.data.tableData.rows];
        } else if (this.type == "3") {
          this.policyList = [...this.policyList, ...result.data.tableData.rows];
        } else if (this.type == "5") {
          this.consultList = [...this.consultList, ...result.data.tableData.rows];
        } else if (this.type == "6") {
          this.projectList = [...this.projectList, ...result.data.tableData.rows];
        } else {
          this.contractList = [
            ...this.contractList,
            ...result.data.tableData.rows,
          ];
        }
      }
    },
    //点击解答更多按钮
    clickAnswerList() {
      // console.log('点击解答更多');
      //每次点击更多把下一页的数据合并到一起
      this.answerMoreNum++;
      // 获取更多的列表
      this.getMoreList(this.answerMoreNum);
    },
    //点击政策更多按钮
    clickPolicyList() {
      // console.log('点击政策更多');
      //每次点击更多把下一页的数据合并到一起
      this.policyMoreNum++;
      // 获取更多的列表
      this.getMoreList(this.policyMoreNum);
    },
    //点击咨询更多按钮
    clickConsultList() {
      // console.log('点击政策更多');
      //每次点击更多把下一页的数据合并到一起
      if(parseFloat(this.searchArticleList.consult) <= this.consultList.length){
        // this.consultMore = false;
        return false;
      }
      this.consultMoreNum++;
      // 获取更多的列表
      this.getMoreList(this.consultMoreNum);
    },
    //点击咨询更多按钮
    clickProjectList() {
      // console.log('点击政策更多');
      //每次点击更多把下一页的数据合并到一起
      if(parseFloat(this.searchArticleList.project) <= this.projectList.length){
        // this.projectMore = false;
        return false;
      }
      this.projectMoreNum++;
      // 获取更多的列表
      this.getMoreList(this.projectMoreNum);
    },
    //点击法条更多按钮
    clickLawList() {
      // console.log('点击法条更多');
      //每次点击更多把下一页的数据合并到一起
      this.lawMoreNum++;
      // 获取更多的列表
      this.getMoreList(this.lawMoreNum);
    },
    //点击合同更多按钮
    clickContractList() {
      // console.log('点击合同更多');
      //每次点击更多把下一页的数据合并到一起
      this.contractMoreNum++;
      // 获取更多的列表
      this.getMoreList(this.contractMoreNum);
    },
    // *************************文章列表*************************end

    //点击某一篇文章之后的回调
    clickArticle(article) {
       console.log('article:', article)
      if (this.$store.getters.token) {
        this.currentDetail = article;
        this.recommendShow = 2;
        //默认获取8个标签
        this.$nextTick(() => {
          this.$refs.detailPage.defaultLabel();
          // this.$refs.detailPage.scrollTo(0, 0);
        });
      } else {
        this.$message({ type: "warning", message: "请登录！" });
        this.$router.push("/Bm-personalCenter/login");
      }
    },
    //点击咨询itme
    clickConsults(item){
      console.log(item,"999999999999999999999");
      //获取以及id
      let twoId = item.pid;
      let threeId = item.id;
      let type = "Bm-Consult";
      this.consultTypeList.forEach((item) => {
        item.children.find(k =>{
          if(k.id == twoId){
            let oneId = k.pid;
            let link = `/${type}/${oneId}?typeId=${twoId},${threeId}`;
            console.log(link);
            this.$router.push({ path: link });
          }
          
        })
      });
    },
    //点击工具itme
    clickProjects(item){
      console.log(item,"999999999999999999999");
      if(item.id == '321'){
        //文控
        this.$router.push({ path: `/Bm-contract/IntelligentControl` });
      }else if(item.id == '311'){
        //阿米巴
        this.$router.push({ path: `/Bm-tool/budget` });
      }else{
        // 获取以及id
        let twoId = item.pid;
        let threeId = item.id;
        let type = "Bm-project";
        console.log(this.projectTypeList,'988777777777777');
        this.projectTypeList.forEach((item) => {
          item.children.find(k =>{
            if(k.id == twoId){
              let oneId = k.pid;
              let link = `/${type}/${oneId}?typeId=${twoId},${threeId}`;
              console.log(link);
              this.$router.push({ path: link });
            }
          })
        });
      }

      
    },
    // 获取咨询类型
    async getConsultTypeListFn() {
      let { code, rows } = await getFindConsultTypeListApi();
      if (code != 200) return;
      this.consultTypeList = JSON.parse(JSON.stringify(rows));
    },
    // 获取项目类型
    async getProjectTypeListFn() {
      let { code, rows } = await getFindProjectTypelistApi();
      if (code != 200) return;
      let projectType = rows.filter(item=>{
        return item.id != '2000000000000000000'
      })
      this.projectTypeList = JSON.parse(JSON.stringify(projectType));
    },
    //获取第一个汉字
    getHanzi(name) {
      if (name) {
        let arr = name.split("");
        let reg =
          /^(\d+$|[a-z]+$|[A-Z]+$|[` ~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$|((?=[!-~])[^\da-zA-Z])+$)/;
        let str = "";
        for (let i = 0; i < arr.length; i++) {
          if (!reg.test(arr[i])) {
            return arr[i];
          }
        }
      }
    },
  },
  computed: {
    //计算总条数
    searchResTotal() {
      return (
        // parseInt(this.searchArticleList.law) +
        // parseInt(this.searchArticleList.policy) +
        // parseInt(“字符串”)转为数字 计算文章总数量
        parseInt(this.searchArticleList.qa) +
        parseInt(this.searchArticleList.consult) +
        parseInt(this.searchArticleList.project) +
        parseInt(this.searchArticleList.contract)
      );
    },
  },
  watch: {
    //监听mockList数据，还没拿到数据的时候显示加载中
    mockList(oldValue, newValue) {
      if (this.mockList.length > 0) {
        // console.log(this.mockList.length);
        this.loadShow = false;
      }
    },

    //监听是否展示初始搜索页(true) 显示初始搜索页的时候要显示推荐内容页
    labelResult(oldValue, newValue) {
      if (newValue == false) {
        //显示推荐内容页
        this.recommendShow = 1;
      }
    },
    //监听如果文章列表数量等于接口获取来的文章列表数量的时候隐藏更多按钮
    // lawMore:true,//法条 answerMore:true,//解答 policyMore:true,//政策 contractMore:true,//合同
    lawList(oldValue, newValue) {
      if (newValue.length >= this.searchArticleList.law) {
        this.lawMore = false;
      } else {
        this.lawMore = true;
      }
    },
    answerList(oldValue, newValue) {
      if (newValue.length >= this.searchArticleList.qa) {
        this.answerMore = false;
      } else {
        this.answerMore = true;
      }
    },
    policyList(oldValue, newValue) {
      if (newValue.length >= this.searchArticleList.policy) {
        this.policyMore = false;
      } else {
        this.policyMore = true;
      }
    },
    contractList(oldValue, newValue) {
      if (newValue.length >= this.searchArticleList.contract) {
        this.contractMore = false;
      } else {
        this.contractMore = true;
      }
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .search .el-card__body {
  padding: 0;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
  padding-top: 20px !important;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
/* 右边搜索 */
.search .el-card {
  background: url("~@/assets/images/dt_img.png") center bottom no-repeat;
  background-size: 100%;
  background-color: #fff;
}
.search .el-card >>> .el-card__body > div {
  position: relative;
  height: 100%;
  overflow-y: inherit;
}
.search >>> header {
  display: none;
}

/* 搜索框悬浮 */
.top_search {
  position: relative;
  padding: 0 30px;
}

.top_search .el-button {
  width: 100%;
  padding: 0;
  color: #d3d3d3;
  font-size: 18px;
}
.top_search .el-button svg {
  margin-right: 14px;
}
.top_search >>> .el-input--medium .el-input__inner,
.top_search .el-button {
  border-radius: 30px;
  height: 50px;
  line-height: 50px;
  border: 2px solid #c4c6ca;
}
.top_search >>> .el-input--medium .el-input__inner{
  padding-left: 50px;
}
::v-deep .top_search .el-input__suffix {
  right: 20px;
}
::v-deep .top_search .el-input__suffix .el-icon-circle-close:before {
  font-size: 12px;
  content: "取消";
  color: #999;
  right: 20px;
}
::v-deep .top_search .el-input__prefix {
  height: auto;
  font-size: 18px;
  color: #bfbfbf;
  left: 20px;
  top: 15px;
}

::v-deep .focusInput {
  border-radius: 30px 30px 0 0 !important;
  border-bottom: 0 !important;
  border-color: #f87a23 !important;
}
::v-deep .noSearchList.el-input__inner {
  border-radius: 30px !important;
  border: 2px solid #f87a23 !important;
}

.top_search .top_found {
  position: absolute;
  z-index: 999999;
  width: calc(100% - 60px);
  max-height: 320px;
  background-color: #fff;
  border: 2px solid #f87a23;
  border-top: 0;
  border-radius: 0 0 30px 30px;
  overflow: hidden;
  overflow-y: auto;
}

.top_search .top_found::-webkit-scrollbar {
  width: 0;
}
.top_search .top_found ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #efefef;
}
.top_search .top_found.noSearchList,
.top_search .top_found.noSearchList ul {
  border: 0;
}
.top_search .top_found ul > li {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 40px;
  padding: 0 10px 0 30px;
  color: #333;
  cursor: pointer;
}
.top_search .top_found ul > li p {
  margin: 0;
}
.top_search .top_found ul > li span {
  font-size: 12px;
  color: #999;
}
.top_search .top_found ul > li:hover {
  background-color: #f4f5f8;
  color: #f87a23;
}
.top_search .top_found ul > li:hover span {
  color: #f87a23;
}

/* 提示语 */
.search_hint{
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  text-align: center;
  margin: 10px 0 0 0;
}

/* 标签推荐页 */
.label_search {
  padding: 0 30px;
  height: calc(100% - 76px);
  overflow-y: auto;
}
.content_search {
}
.content_search > h4 {
  width: 100%;
  font-size: 12px;
  color: #666;
  margin-top: 30px;
}
.content_search > div {
  display: flex;
  flex-wrap: wrap;
}
.content_search .el-tag {
  width: 22%;
  margin-right: 4%;
  text-align: center;
  height: 36px;
  line-height: 36px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  background-color: #f4f5f8;
  color: #39486f;
  cursor: pointer;
  transition: all 0.3s;
}
.content_search .el-tag:nth-child(4n) {
  margin-right: 0;
}
.content_search .el-tag.isActive,
.content_search .el-tag:hover {
  background-color: #f87a23;
  color: #fff;
}

.hot_label .el-tag {
  font-weight: normal;
  font-size: 12px;
  color: #666;
  margin-bottom: 16px;
}

.label_more {
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
  flex-basis: 100%;
}

/* 搜索结果页 */
.search_result {
  height: calc(100% - 76px);
  overflow-y: auto;
  background-color: #fff;
}
.search_label {
  display: none;
  align-items: center;
  padding: 0 30px;
  font-size: 20px;
  font-weight: bold;
  margin: 30px 0;
}
.search_label svg {
  font-size: 36px;
  margin-right: 15px;
}
.search_criteria {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
  margin: 16px 0;
  padding: 0 30px;
}
.search_criteria > div {
  width: 92%;
}
.search_criteria .el-tag {
  border-color: #f7ecda;
  color: #f87a23;
  border-radius: 14px;
  margin-right: 6px;
  margin-bottom: 5px;
}
.search_criteria .el-tag >>> .el-tag__close {
  color: #f87a23;
}
.search_criteria .el-tag >>> .el-tag__close:hover {
  color: #fff;
  background-color: #f87a23;
}
.search_criteria > p {
  width: 8%;
  text-align: right;
  margin: 0;
  cursor: pointer;
  margin-top: 5px;
}
/* 标签 tab栏切换 */
.search_tab {
  padding: 0 30px;
}
.search_tab >>> .el-tabs--card > .el-tabs__header {
  border: 1px solid #e5e6e9;
  background-color: #f1f3ff;
  border-radius: 25px;
}
.search_tab >>> .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
  display: flex;
  justify-content: center;
  float: none;
}
.search_tab >>> .el-tabs--card > .el-tabs__header .el-tabs__item {
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  padding: 0 6%;
  border: 0;
  font-weight: bold;
}
.search_tab >>> .el-tabs--card > .el-tabs__header .el-tabs__item.is-active,
.search_tab >>> .el-tabs--card > .el-tabs__header .el-tabs__item:hover {
  color: #f87a23;
}
.search_tab >>> .el-tab-pane {
  display: flex;
  flex-wrap: wrap;
}
.search_tab >>> .el-tag {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 23%;
  margin-right: 2%;
  margin-bottom: 10px;
  border-color: #efefef;
  background-color: #fff;
  color: #333;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  cursor: pointer;
}
.search_tab >>> .el-tag > span:first-child {
  display: block;
  width: 70%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.search_tab >>> .el-tag > span:last-child {
  width: 30%;
  text-align: right;
}
.search_tab >>> .el-tag:nth-child(4n) {
  margin-right: 0;
}
.search_tab >>> .el-tag > span {
  line-height: 35px;
}
.search_tab >>> .el-tag:hover {
  background-color: #f4f5f8;
  border-color: #f4f5f8;
}
.search_tab >>> .el-tag > span:last-child {
  color: #bababa;
}

/* 列表 tab栏切换 */
.search_list {
  position: relative;
  border-top: 1px solid #efefef;
  padding-top: 20px;
  margin-top: 20px;
}
.search_total {
  position: absolute;
  right: 30px;
  top: 30px;
  margin: 0;
  font-size: 12px;
  color: #999;
  z-index: 9;
}
.search_list >>> .el-tabs--card > .el-tabs__header {
  border: 0;
  padding: 0 30px;
  margin-bottom: 8px;
}
.search_list >>> .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
  float: none;
}
.search_list >>> .el-tabs__item {
  border: 0;
  padding: 0 8px;
  height: 32px;
  line-height: 32px;
  margin-right: 10px;
}

.search_list
  >>> .el-tabs--top.el-tabs--card
  > .el-tabs__header
  .el-tabs__item:nth-child(2) {
  padding: 0 8px;
}

.search_list >>> .el-tabs__item.is-active {
  color: #fff!important;
  background-color: #f87a23;
  border-radius: 20px;
}
.search_list >>> .el-tabs__item:hover{
  color: #f87a23;
}
.search_list >>> .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
  padding: 0 5px;
}

.search_list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search_list ul > li {
  position: relative;
  padding: 10px 30px 10px 30px;
  border-bottom: 1px solid #efefef;
  cursor: pointer;
}
.search_list ul > li:hover,
.search_list ul > li.isActive {
  background-color: #f4f5f8;
}
.search_list ul > li > i {
  position: absolute;
  left: 30px;
  top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 30px;
  height: 30px;
  background-color: #38476d;
  border-radius: 4px;
  color: #fff;
  font-style: normal;
}
.search_list ul > li:nth-child(even) > i {
  background-color: #b1bedf;
}
.search_list ul > li > h2 {
  font-size: 14px;
  font-weight: bold;
  line-height: 21px;
  color: #333;
  margin: 0;
  padding-top: 15px;
  margin-bottom: 12px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 这里是超出几行省略 */
  overflow: hidden;
}
.search_list ul > li .coll_des {
  width: 100%;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.search_list ul > li .coll_source {
  margin: 0;
  margin-top: 6px;
  margin-bottom: 12px;
  line-height: 18px;
  font-size: 12px;
  color: #bbb;
}

.search_list .el-button {
  margin: 15px auto;
}
.search_list .el-tab-pane > p {
  text-align: center;
  font-size: 12px;
  color: #999;
}

@media (max-width: 1430px) {
  .search_list >>> .el-tabs__item {
    padding-right: 15px;
  }
}
@media (max-width: 1280px) {
  .search_list >>> .el-tabs__item {
    font-size: 13px;
    padding-right: 10px;
  }
}

/* 加载状态样式 */
.loading {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  color: #999;
  font-size: 12px;
}
</style>

<style scoped>
/* 响应式 */
@media (max-width: 1120px) {
  .top_search .el-button {
    padding-left: 0px;
  }
  .top_search .el-button svg{
    margin-right: 4px;
  }
  .content_search .el-tag{
    height: 32px;
    line-height: 32px;
  }

  .search_criteria > div{
    width: 90%;
  }
  .search_criteria > p{
    width: 10%;
  }
  .search_total{
    position: initial;
    padding-left: 30px;
  }
}
</style>

<style lang="scss" scoped>
// gif表情
.slogan{
	padding-top: 50px;
	padding-bottom: 100px;
	text-align: center;
	
	.gif{
		// padding-top:50rpx;
	}
	.gif img{
		width: 150px;
		margin: 0 auto;
	}
	.text{
		// padding-top:50rpx;
		text-transform:uppercase;
		.cn{
			font-size: 40px;
			color: rgb(246, 246, 247)
		}
		.en{
			font-size: 14px;
			color: rgb(246, 246, 247)
		}
	}
	.text img{
		width: 551px;
		height: 116px;
		margin: 0 atuo;
	}
}

.tabThree{
  padding:20px 22px;
  padding-bottom:0;
}
.tabThree ul {
  width: 100%;
}
.tabThree ul > li {
  display: flex;
  padding: 15px;
  border: 1px solid #efefef;
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
}
.tabThree ul > li img {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  margin-top: 2px;
}
.tabThree ul > li p {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}
.tabThree ul > li span {
  font-size: 12px;
  color: #999;
}
.tabThree ul > li:hover {
  background-color: #f4f5f8;
  border-color: #f4f5f8;
}
.tabThree ul > li.isthree {
 background-color: #f4f5f8;
  border-color: #f4f5f8;
  color: #f87a23;

}
.tabThree ul > li:hover p {
  color: #f87a23;
}
.problem h3 {
  font-size: 20px;
  font-weight: bold;
}
.problem h3 > i {
  color: #f87a23;
}
.problem h3 > span {
  font-size: 12px;
  color: #f87a23;
}
::v-deep .problem textarea {
  font-family: "微软雅黑";
  border-radius: 12px;
}
</style>